<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
  Experiment with pushlet client using hidden IFRAME.

  $Id: system-iframe.html,v 1.6 2006/05/25 10:47:03 justb Exp $
  author: Just van den Broecke
  $Log: system-iframe.html,v $
  Revision 1.6  2006/05/25 10:47:03  justb
  replaced JSP js-pushlet-client.jsp with JS js-pushlet-client.js

  Revision 1.5  2006/05/15 11:52:53  justb
  updates mainly for AJAX client

  Revision 1.4  2005/01/13 14:01:43  justb
  mainly servlet URI mappings to *.srv

  Revision 1.3  2004/10/24 20:51:11  justb
  refine examples for new protocol

  Revision 1.2  2004/03/10 15:45:55  justb
  many cosmetic changes

  Revision 1.2  2003/09/06 10:09:32  justb
  fixes here and there


-->
<html>
<head>
	<title>System - IFRAME Test</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Pragma" content="no-cache">

	<script type="text/javascript" src="../../lib/js-pushlet-client.js"></script>


     <script type="text/javascript">
    /* Object to represent Gauge */
function Gauge(bgId, fgId, theWindow, x, y, width, height, bgColor, fgColor) {
  this.bgText = "";
  this.fgText = "";
      this.text1= "<table border=0 width=";
      this.text2=" height="
      this. text3= " bgColor="
      this.text4 = "><tr><td>&nbsp;</td></tr></table>";
	// Member data setup
	this.bgLayer = new Layer(bgId, theWindow);
    this.fgLayer = new Layer(fgId, theWindow);

    this.bgLayer.setX(x);
    this.bgLayer.setY(y);
    this.bgLayer.setZIndex(1);

     this.bgLayer.write(this.text1 + width + this.text2 + height +this. text3 + bgColor + this.text4);



    this.fgLayer.setZIndex(2);
       this.fgLayer.setX(x);
    this.fgLayer.setY(y+height);
    this.fgLayer.write(this.text1 + width + this.text2 + 0 + this.text3 + fgColor + this.text4);

    this.height = height;
    this.width = width;
    this.x =x;
    this.y = y;
    this.value = 0;
    this.maxValue = height;
    this.bgColor = bgColor;
    this.fgColor = fgColor;
	// Member function setup
	this.setValue = GaugeSetValue
	this.setMaxValue = GaugeSetMaxValue
    this.setValue(0);
}

var i=0;
var nextValue;;

function GaugeSetValue(value) {
         // this.bgLayer.show();
        this.fgLayer.setY(  (this.y + this.height) - value/this.maxValue * this.height);
        this.fgLayer.write(this.text1 + this.width + this.text2 + (value/this.maxValue * this.height) + this.text3 + this.fgColor + this.text4);
        this.value = value;
   }

function GaugeSetMaxValue(maxValue) {
        //    if (i < 2) {alert('maxValue=' + maxValue); } i++;
        this.maxValue = maxValue;
        nextValue = this.value;
}

var gauge;
var newValue;
var newMaxValue;
function onData(pushletEvent) {
            if (pushletEvent.getSubject() == '/system/jvm') {
				var freeMemory = pushletEvent.get('freeMemory');
				var totalMemory = pushletEvent.get('totalMemory');
				gauge.setMaxValue(totalMemory);
				gauge.setValue(freeMemory);
	  	}
}


         function animate() {

      if (diff < 0) {
          nextValue += 1;
          if (nextValue < this.value) {
   				setTimeout("animate()",10);
           }
      } else {
         nextValue -= 1;
         if (nextValue > this.value) {
   				setTimeout("animate()",10);
           }
        }
        this.value = value;
         }

		// Subscribe to topic
		function init() {
			// Init api.js
			initDHTML();
            gauge = new Gauge('gaugeBG', 'gaugeFG', window, 100, 100, 60, 160, '#0000FF', '#00FF00');

  			// Do subscription by writing pushlet.html into a hidden IFRAME
			// This will result in callbacks to onData() when Events come in.
    		var iframe = '<iframe src="/pushlet/assets/pushlet.html?subject=/system/jvm" height="0" width="0" />';
			layerWrite(getRawObject("pushlet"), iframe);
 		}

	</script>

</head>

<body onLoad="init()" bgcolor="#cccccc">
         <div id="pushlet" style="position:absolute;">SUBSCRIBER...</div>
         <div id="gaugeBG" style="position:absolute;">gaugeBG...</div>
         <div id="gaugeFG" style="position:absolute;">gaugeFG...</div>
</body>
</html>

